import { motion } from "motion/react";
import { Menu, Bot, Settings, User, Puzzle } from "lucide-react";
import { Button } from "./ui/button";
import { Badge } from "./ui/badge";
import { AgentSelector } from "./AgentSelector";

interface HeaderProps {
  selectedAgent?: any;
  onAgentSelect: (agent: any) => void;
  onMenuClick: () => void;
  onExtensionsClick?: () => void;
  onSettingsClick?: () => void;
}

export function Header({ selectedAgent, onAgentSelect, onMenuClick, onExtensionsClick, onSettingsClick }: HeaderProps) {
  return (
    <motion.header
      initial={{ y: -20, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      className="h-14 md:h-16 border-b border-white/10 dark:border-slate-700/50 bg-white/60 dark:bg-slate-900/60 backdrop-blur-xl supports-[backdrop-filter]:bg-white/40 dark:supports-[backdrop-filter]:bg-slate-900/40"
    >
      <div className="flex items-center h-full px-3 md:px-4 lg:px-6 gap-4 md:gap-10">
        {/* 左侧：菜单和标题 */}
        <div className="flex items-center space-x-3 md:space-x-4">
          <Button
            variant="outline"
            onClick={onMenuClick}
            className="text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white"
          >
            <Menu className="w-4 h-4 md:w-5 md:h-5" />
          </Button>

          <div className="flex items-center space-x-2 md:space-x-3">
            <motion.div
              whileHover={{ rotate: 10, scale: 1.1 }}
              whileTap={{ scale: 0.95 }}
              className="w-7 h-7 md:w-8 md:h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg md:rounded-xl flex items-center justify-center shadow-md md:shadow-lg"
            >
              <Bot className="w-3 h-3 md:w-4 md:h-4 text-white" />
            </motion.div>
            <div>
              <h1 className="text-base md:text-lg font-semibold text-slate-900 dark:text-white">
                Iroh Rig
              </h1>
              <p className="text-xs text-slate-500 dark:text-slate-400 hidden sm:block">
                AI Assistant Platform
              </p>
            </div>
          </div>
        </div>

        {/* 中间：Agent选择器 */}
        <div className="hidden md:block flex-1 max-w-md">
          <AgentSelector
            selectedAgent={selectedAgent}
            onAgentSelect={onAgentSelect}
            className="w-full"
          />
        </div>

        {/* 右侧：用户信息和设置 */}
        <div className="flex items-center space-x-2 md:space-x-3">
          {/* Agent状态（移动端显示） */}
          {selectedAgent && (
            <div className="md:hidden">
              <Badge className="text-xs bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800">
                {selectedAgent.name}
              </Badge>
            </div>
          )}

          {/* 扩展按钮 */}
          <Button
            variant="outline"
            onClick={onExtensionsClick}
            className="text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white"
          >
            <Puzzle className="w-4 h-4 md:w-5 md:h-5" />
          </Button>

          {/* 设置按钮 */}
          <Button
            variant="outline"
            onClick={onSettingsClick}
            className="text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white"
          >
            <Settings className="w-4 h-4 md:w-5 md:h-5" />
          </Button>

          {/* 用户头像 */}
          <Button
            variant="outline"
            className="text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white"
          >
            <User className="w-4 h-4 md:w-5 md:h-5" />
          </Button>
        </div>
      </div>

      {/* 移动端Agent选择器 */}
      <div className="md:hidden px-3 md:px-4 pb-2 md:pb-3 border-t border-white/10 dark:border-slate-700/50">
        <AgentSelector
          selectedAgent={selectedAgent}
          onAgentSelect={onAgentSelect}
          className="w-full h-8 text-sm"
        />
      </div>
    </motion.header>
  );
}
